{% extends 'base.html' %}
{% block title %}
    登陆
{% endblock %}
{% block middle %}
    <div class="layui-row">
        <div class="layui-col-md4 layui-col-md-offset4">
            {% csrf_token %}
            <form class="layui-form"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
                <div class="layui-form-item">
                    <label class="layui-form-label" style="width: 100px">用户名：</label>
                    <div class="layui-input-block">
                        <input type="text" name="" placeholder="请输入用户名" autocomplete="off" class="layui-input"
                               lay-verify="username" id="name">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label" style="width: 100px">密码：</label>
                    <div class="layui-input-block">
                        <input type="password" lay-verify="pass" name="" placeholder="请输入密码" autocomplete="off"
                               class="layui-input" id="pwd">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="validCode" class="layui-form-label" style="width: 100px">验证码：</label>
                    <div class="layui-input-block">
                        <input type="text" name="" placeholder="不分大小写" autocomplete="off" lay-verify="required"
                               class="layui-input" id="validCode">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <img src="/get_validCode/" title="60s后失效" height="35" width="100" class="img-rounded"
                             id="get_validCode_img" draggable="false">
                        <span style="margin-left: 30px;color: red;" id="msg"></span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="*">登录</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>

    </div>

{% endblock %}
{% block js %}
    <script>
        $("#get_validCode_img").click(function () {
            $(this)[0].src += '?'
        })
        layui.use('form', function () {
            var form = layui.form;
            form.on('submit(*)', function (data) {
                var da = {
                    'name': $('#name').val(),
                    'pwd': $('#pwd').val(),
                    'validCode': $('#validCode').val(),
                    csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val()
                    {#'csrfmiddlewaretoken': '{{ csrf_token }}'#}
                };
                $.ajax({
                    url: '/login/',
                    type: 'post',
                    data: da,
                    success: function (data) {
                        if (data.name) {
                            if (data.user_type == 2){
                                location.href = '/backend/'
                            }
                            else{
                                location.href = '/index/'
                            }
                        }
                        else {
                            $('#msg').text(data.msg)
                        }
                    }
                })
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
            //各种基于事件的操作，下面会有进一步介绍

            //验证
            form.verify({
                username: function (value, item) { //value：表单的值、item：表单的DOM对象
                    if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
                        return '用户名不能有特殊字符';
                    }
                    if (/(^\_)|(\__)|(\_+$)/.test(value)) {
                        return '用户名首尾不能出现下划线\'_\'';
                    }
                    if (/^\d+\d+\d$/.test(value)) {
                        return '用户名不能全为数字';
                    }
                }
                //我们既支持上述函数式的方式，也支持下述数组的形式
                //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
                , pass: [
                    /^[\S]{6,12}$/
                    , '密码必须6到12位，且不能出现空格'
                ]
            });
        });

    </script>
{% endblock %}